<ui:component xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:app="http://java.sun.com/jsf/composite/app"
              xmlns:ds="http://deltaset.org/deltaset-faces"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:c="http://java.sun.com/jsp/jstl/core">


    <ds:titlebar title="#{userDetailMsg['view.title']}"/>


    <ds:fieldset rendered="#{not empty userDetailModel.id}">


        <ds:outputText label="#{userDetailMsg['firstName']}" value="#{userDetailModel.firstName}"/>
        <ds:outputText label="#{userDetailMsg['lastName']}" value="#{userDetailModel.lastName}"/>
        <ds:outputText label="#{userDetailMsg['phone']}" value="#{userDetailModel.phone}"/>
        <ds:outputText label="#{userDetailMsg['email']}" value="#{userDetailModel.email}"/>
        <ds:outputText label="#{userDetailMsg['type']}" value="#{userDetailModel.type}"/> 

    </ds:fieldset>

    <ds:fieldset rendered="#{empty userDetailModel.id}">

        Please select UserDetail <br/>

    </ds:fieldset>


    <c:set target="#{viewScope}" property="userDetailPageHelperMTO" value="#{userDetailBean.all(param.page)}"/>
    <ds:pagedDataTable rendered="#{not empty userDetailTarget}"
                       title="All UserDetails"
                       pageHelper="#{viewScope.userDetailPageHelperMTO}"
                       pageParamName="page">
                       
            <h:column>
                <f:facet name="header">
                    <h:outputText value="#{userDetailMsg['firstName']}"/>
                </f:facet>
                <h:outputText value="#{item.firstName}"/>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="#{userDetailMsg['lastName']}"/>
                </f:facet>
                <h:outputText value="#{item.lastName}"/>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="#{userDetailMsg['phone']}"/>
                </f:facet>
                <h:outputText value="#{item.phone}"/>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="#{userDetailMsg['email']}"/>
                </f:facet>
                <h:outputText value="#{item.email}"/>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="#{userDetailMsg['type']}"/>
                </f:facet>
                <h:outputText value="#{item.type}"/>
            </h:column>
 

        <h:column>
            <h:commandButton styleClass="ds-button"
                             onmouseup="this.blur()"
                             immediate="true"
                             action="#{userDetailBean.setModelTo(item,userDetailTarget)}"
                             value="Select">
                <f:ajax execute="@form" render="@form"/>
            </h:commandButton>
        </h:column>
    </ds:pagedDataTable>

</ui:component>